<template>
	<s-layout title="发布素材">
		<uni-forms :model="state.info" ref="form" :rules="rules">
			<view class="refund-item">
        <view class="ss-flex ss-row-between ss-col-center">
          <view class="anonymous-t">是否匿名</view>
          <switch :checked="state.info.is_anon == 2" @change="changeSwitch"/>
        </view>
				<view>
					<view class="item-title ss-m-b-20">素材标题</view>
					<uni-forms-item name="title">
						<uni-easyinput :inputBorder="false" class="" type="text" v-model="state.info.title"
							placeholder="请填写素材标题"></uni-easyinput>
					</uni-forms-item>
				</view>
				<view>
					<view class="item-title ss-m-b-20">素材文本</view>
					<uni-forms-item name="content">
						<uni-easyinput :inputBorder="false" class="describe-content" type="textarea" maxlength="120"
							autoHeight v-model="state.info.content" placeholder="请填写素材文本"></uni-easyinput>
					</uni-forms-item>
				</view>
				<view>
					<view class="item-title ss-m-b-20">上传照片</view>
					<uni-forms-item name="images" ref="images">
						<s-uploader class="upload-img" v-model:url="state.info.images" fileMediatype="image" limit="9" mode="grid" :imageStyles="{ width: '168rpx', height: '168rpx' }" />
					</uni-forms-item>
				</view>
				<view>
					<view class="item-title ss-m-b-20">选择商品 <text>（请通过搜索选择商品）</text></view>
					<uni-forms-item name="gid">
						<uni-search-bar placeholder="搜索商品关键字" radius="27" @confirm="search" @cancel="search" />
						<uni-list v-if="state.goodsList.length>0">
							<radio-group @change="radioChange">
								<radio activeBackgroundColor="#ff3000" :value="item.id+''" v-for="item in state.goodsList" :key="item.id">
									<uni-list-item :title="item.title" :note="'￥'+item.price" :thumb="item.image"
										thumb-size="lg"></uni-list-item>
								</radio>
							</radio-group>
						</uni-list>
            <view v-if="state.goodsList.length === 0" class="no-goods">
              没有满足条件的商品~
            </view>
					</uni-forms-item>
				</view>
			</view>
		</uni-forms>

		<su-fixed bottom placeholder bg="bg-white">
			<view class="ss-flex ss-row-center ss-col-center ss-p-20">
				<button class="ss-reset-button post-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="submit">
					确认发布
				</button>
			</view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		unref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';

	const form = ref(null);
	const images = ref(null);

	const rules = {
		title: {
			rules: [{
				required: true,
				errorMessage: '请填写素材标题'
			}]
		},
		content: {
			rules: [{
				required: true,
				errorMessage: '请填写素材内容'
			}]
		},
		images: {
			rules: [{
				required: true,
				errorMessage: '请上传图片'
			}]
		},
		gid: {
			rules: [{
				required: true,
				errorMessage: '请选择商品'
			}]
		}
	}

	const state = reactive({
		info: {
			title: "",
			content: "",
			images: [],
			gid: "",
      is_anon:1,
		},
		keyword: "",
		page: 1,
		pageSize: 20,
		goodsList: []
	})

  function changeSwitch(e){
    state.info.is_anon = e.detail.value ? 2:1
  }

	function search(e) {
		state.keyword = e.value;
		getGoodsList();
	}

	async function getGoodsList() {
		const info = {
			keyword: state.keyword,
			p: state.page,
			pagesize: state.pageSize
		}
		const res = await sheep.$api.material.goodsList(info);
		state.goodsList = res.data
	}

	function radioChange(e) {
		state.info.gid = e.detail.value
	}

	async function submit() {
		const validate = await unref(form)
			.validate()
			.catch((error) => {
				'error: ',
				error;
			});
		if (!validate) return;
		const info = {
			...state.info
		}
		if(!info.images.length || !info.gid){
			uni.showToast({
				title: '请全部填写哦~',
				icon: "none",
				duration: 2000
			});
			return
		}
		const {code} = await sheep.$api.material.addMaterial(info);
    if(code==1){
      uni.showToast({
        title: '发布成功',
        icon: "success",
        duration: 2000
      });
      setTimeout(() => {
        sheep.$router.back();
      }, 1000);
    }
	}

	onLoad((options) => {
		// getGoodsList();
	});
</script>

<style lang="scss" scoped>

	.refund-item {
		padding: 30rpx;

		>view {
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}
		uni-radio{
			width: 100%;
		}
	}

  .anonymous-t{
    font-size: 30rpx;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
  }

	.item-title {
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		border-bottom: 2rpx solid #F7F8FA;
		margin: 0;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;

		>text {
			font-size: 24rpx;
			color: #666666;
		}
	}


	.describe-content {
		height: 250rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
		padding: 15rpx 0;
		box-sizing: border-box;
	}

	.upload-img {
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.post-btn {
		width: 690rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
	}

  .no-goods{
    font-size: 26rpx;
    color: #999;
    text-align: center;
    padding: 20rpx;
  }
</style>
